<template>
  <div class="container">
    <Breadcrumb />
    <a-card class="data-card">
      <a-row>
        <a-col :flex="1">
          <a-form
            :model="formModel"
            :label-col-props="{ span: 6 }"
            :wrapper-col-props="{ span: 18 }"
          >
            <a-row :gutter="20">
              <a-col :span="5">
                <a-form-item field="nickname" label="姓名">
                  <a-input
                    v-model="formModel.nickname"
                    placeholder="请输入姓名"
                    allow-clear
                  />
                </a-form-item>
              </a-col>

              <a-col :span="5">
                <a-form-item field="deptId" label="组织">
                  <a-cascader
                    v-model="formModel.deptId"
                    check-strictly
                    :options="organizations"
                    placeholder="请选择所在组织"
                    :field-names="props"
                    :show-all-levels="false"
                    @change="changsds"
                    allow-clear
                  ></a-cascader>
                </a-form-item>
              </a-col>
              <a-col :span="5">
                <a-space :size="18">
                  <a-button type="primary" @click="onPageChange(1)">
                    <template #icon>
                      <icon-search />
                    </template>
                    搜索
                  </a-button>
                  <a-button @click="reset">
                    <template #icon>
                      <icon-refresh />
                    </template>
                    重置
                  </a-button>
                </a-space>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
      <a-divider style="margin-top: 0" />
      <a-row style="margin-bottom: 16px">
        <a-col :span="12">
          <a-space>
            <a-button @click="openAdd" type="primary">
              <template #icon>
                <icon-plus />
              </template>
              新增
            </a-button>
            <a-button @click="openAddtime" type="primary"> 时间配置 </a-button>
            <!-- <a-button @click="openUpload"> 批量导入 </a-button> -->
          </a-space>
        </a-col>
        <a-col
          :span="12"
          style="display: flex; align-items: center; justify-content: end"
        >
          <a-space>
            <!-- <a-button
              @click="openUnlockAll()"
              type="primary"
              status="success"
              :disabled="!userIds || userIds.length <= 0"
            >
              批量解锁
            </a-button> -->
            <!-- <a-button @click="downloadUser">
              <template #icon>
                <icon-download />
              </template>
              批量导出
            </a-button> -->
          </a-space>
        </a-col>
      </a-row>
      <a-table
        ref="userList"
        row-key="therapistId"
        v-model:selectedKeys="userIds"
        :loading="loading"
        page-position="bottom"
        :pagination="pagination"
        :row-selection="rowSelection"
        :columns="columns"
        :data="renderData"
        :bordered="false"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
        <template #sex="{ record }">
          <template v-for="(item, index) in sexs">
            <span v-if="record.sex == item.value">{{ item.label }}</span>
          </template>
        </template>
        <template #isLocking="{ record }">
          <template v-for="(item, index) in isLockings">
            <span v-if="record.isLocking == item.value">{{ item.label }}</span>
          </template>
        </template>
        <template #organizationName="{ record }">
          {{
            record.organization[0]
              ? record.organization[0].organizationName
              : ''
          }}
        </template>

        <template #option="{ record }">
          <a-space :size="18">
            <a-button type="outline" @click="openRePass(record)">
              重置密码
            </a-button>

            <a-button @click="openEdit(record)" type="primary"> 编辑 </a-button>
            <a-button
              status="danger"
              @click="openDelete(record)"
              v-if="record.username != 'admin'"
            >
              删除
            </a-button>
          </a-space>
        </template>
      </a-table>
    </a-card>
    <a-modal
      v-model:visible="addShow"
      @cancel="handleCancel"
      :on-before-ok="handleCheck"
      :mask-closable="false"
      unmountOnClose
      width="900px"
    >
      <template #title> 用户 </template>
      <a-form ref="addModel" :rules="rules" :model="addForm">
        <a-row style="margin-bottom: 16px">
          <a-col :span="12" v-if="!addForm.therapistId">
            <a-form-item field="username" label="用户名">
              <a-input
                v-model="addForm.username"
                size="large"
                placeholder="请输入用户名"
                :disabled="addForm.therapistId ? true : false"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12" v-if="!addForm.therapistId">
            <a-form-item field="password" label="密码">
              <a-input-password
                v-model="addForm.password"
                size="large"
                placeholder="请输入密码"
                :disabled="addForm.therapistId ? true : false"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="nickname" label="姓名">
              <a-input
                v-model="addForm.nickname"
                size="large"
                placeholder="请输入姓名"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="sex" label="性别">
              <a-select
                v-model="addForm.sex"
                :options="sexs"
                placeholder="请选择性别"
              />
            </a-form-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-item field="position" label="职位">
              <a-select
                v-model="addForm.position"
                :options="positions"
                placeholder="请选择职位"
              />
            </a-form-item>
          </a-col> -->
          <a-col :span="12" v-if="!addForm.therapistId">
            <a-form-item field="number" label="编号">
              <a-input
                v-model="addForm.number"
                size="large"
                placeholder="请输入编号"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="dayNumber" label="总数量">
              <a-input
                v-model="addForm.dayNumber"
                size="large"
                placeholder="请输入接待患者总上限数量"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="intervalNumber" label="区间数量">
              <a-input
                v-model="addForm.intervalNumber"
                size="large"
                placeholder="请输入半小时接待患者数量"
              />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item field="organizationId" label="组织管理">
              <a-cascader
                v-model="addForm.organizationId"
                :max-tag-count="1"
                :options="organizations"
                placeholder="请选择组织"
                @change="changsd"
                :field-names="organizationsFields"
              ></a-cascader>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
    <a-modal
      v-model:visible="uploadShow"
      @cancel="uploadCancel"
      :on-before-ok="uploadCheck"
      :mask-closable="false"
      unmountOnClose
      width="450px"
    >
      <template #title> 导入用户 </template>
      <a-form ref="uploadModel" :rules="uploadRules" :model="uploadForm">
        <a-row style="margin-bottom: 16px">
          <a-form-item field="roleId" label="角色">
            <a-select
              v-model="uploadForm.roleId"
              :options="roles"
              :field-names="rolesFields"
              placeholder="请选择角色"
            />
          </a-form-item>

          <a-form-item field="file" label="文件">
            <a-upload
              class="upload_box"
              @change="onChange"
              accept=".xls,.xlsx"
              ref="uploadRef"
              :auto-upload="false"
              :limit="1"
            >
              <template #upload-button>
                <a-space>
                  <a-button type="primary">选择附件</a-button>
                  <a-button @click.stop="downloadTemplate">下载模板</a-button>
                </a-space>
              </template>
            </a-upload>
          </a-form-item>
        </a-row>
      </a-form>
    </a-modal>
    <!-- 设置时间配置 -->
    <a-modal
      v-model:visible="addShowtime"
      @cancel="handleCanceltime"
      :on-before-ok="handleChecktime"
      :mask-closable="false"
      unmountOnClose
    >
      <template #title> 时间配置 </template>
      <a-form ref="addModeltime" :rules="rulestime" :model="addFormtime">
        <a-row style="margin-bottom: 16px">
          <a-form-item field="work_time" label="上班时间">
            <a-time-picker
              v-model="addFormtime.work_time"
              format="HH:mm"
              type="time-range"
              style="width: 252px"
            />
          </a-form-item>
          <a-form-item field="rest_time" label="休息时间">
            <a-time-picker
              v-model="addFormtime.rest_time"
              format="HH:mm"
              type="time-range"
              style="width: 252px"
            />
          </a-form-item>
          <a-form-item field="work_day" label="工作日">
            <a-checkbox-group
              v-model="addFormtime.work_day"
              :options="work_days"
            />
          </a-form-item>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts">
  export default {
    name: 'user',
  };
</script>
<script lang="ts" setup>
  import { computed, ref, reactive, watch, nextTick } from 'vue';
  import useLoading from '@/hooks/loading';
  import { useSelectionStore } from '@/store';
  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
  import { Message, Modal } from '@arco-design/web-vue';
  import {
    therapistList,
    therapistSave,
    therapistrUpdate,
    therapistRemove,
    resetPassword,
    importAdminUser,
    adminUserExport,
    downloadTemplate,
    getTimeConf,
    setTimeConf,
  } from '@/api/therapist.ts';
  //   import { deptTree } from '@/api/dept.ts';
  import { organizationTree } from '@/api/organization.ts';
  import { roleList } from '@/api/role.ts';
  import { values } from 'lodash';
  import { number } from 'echarts';

  //   import { majorTree } from '@/api/major.ts';
  //   选中测试
  const changsd = (value) => {
    function findParentIdById(idToFind) {
      for (let i = 0; i < organizations.value.length; i++) {
        const item = organizations.value[i];
        if (item.id === idToFind) {
          return item.parentId;
        }
        if (item.children) {
          for (let j = 0; j < item.children.length; j++) {
            const childItem = item.children[j];
            if (childItem.id === idToFind) {
              return item.id;
            }
            if (childItem.children) {
              for (let k = 0; k < childItem.children.length; k++) {
                const grandChildItem = childItem.children[k];
                if (grandChildItem.id === idToFind) {
                  return childItem.id;
                }
              }
            }
          }
        }
      }
      return null;
    }
    const parentId = findParentIdById(value);
    addForm.value.groupName = parentId;
    addForm.value.attribute = value;
    //   formModel.value.attribute = value;
    // formModel.value.groupName = parentId;
    // if (parentId == 0) {
    //   formModel.value.attribute = '';
    //   formModel.value.groupName = value;
    // }
    console.log('巅峰', value, parentId);
  };
  const changsds = (value) => {
    formModel.value.groupName = '';
    formModel.value.attribute = '';
    function findParentIdById(idToFind) {
      for (let i = 0; i < organizations.value.length; i++) {
        const item = organizations.value[i];
        if (item.id === idToFind) {
          return item.parentId;
        }
        if (item.children) {
          for (let j = 0; j < item.children.length; j++) {
            const childItem = item.children[j];
            if (childItem.id === idToFind) {
              return item.id;
            }
            if (childItem.children) {
              for (let k = 0; k < childItem.children.length; k++) {
                const grandChildItem = childItem.children[k];
                if (grandChildItem.id === idToFind) {
                  return childItem.id;
                }
              }
            }
          }
        }
      }
      return null;
    }
    const parentId = findParentIdById(value);

    formModel.value.attribute = value;
    formModel.value.groupName = parentId;
    if (parentId == 0) {
      formModel.value.attribute = '';
      formModel.value.groupName = value;
    }
  };
  const { loading, setLoading } = useLoading(true);

  const generateDataModel = () => {
    return {
      therapistId: '',
      username: '',
      nickname: '',
      sex: '',
      number: null,
      position: '',
      groupName: '',
      attribute: '',
      dayNumber: null,
      timeConf: '',
    };
  };
  const rulestime = {
    work_time: [
      {
        required: true,
        message: '请选择上班时间',
      },
    ],
    rest_time: [
      {
        required: true,
        message: '请选择休息时间',
      },
    ],
    work_day: [
      {
        required: true,
        message: '请选择上班日期',
      },
    ],
  };
  const rules = {
    position: [
      {
        required: true,
        message: '请选择职位',
      },
    ],
    intervalNumber: [
      {
        required: true,
        message: '请输入患者人数',
      },
    ],
    dayNumber: [
      {
        required: true,
        message: '请输入患者人数',
      },
    ],
    password: [
      {
        required: true,
        message: '请输入密码',
      },
      {
        minLength: 3,
        message: '最少输入三位',
      },
    ],
    username: [
      {
        required: true,
        message: '请输入用户名',
      },
      {
        minLength: 4,
        message: '最少输入四位',
      },
    ],
    nickname: [
      {
        required: true,
        message: '请输入姓名',
      },
    ],
    sex: [
      {
        required: true,
        message: '请选择性别',
      },
    ],
    deptId: [
      {
        required: true,
        message: '请选择部门',
      },
    ],
    roleId: [
      {
        required: true,
        message: '请选择角色',
      },
    ],
    effectiveTime: [
      {
        required: true,
        message: '请选择有效期',
      },
    ],

    organizationId: [
      {
        required: true,
        message: '请选择组织',
      },
    ],
  };
  const addForm = ref(generateDataModel());
  const addShow = ref(false);
  const addModel = ref();
  const addModeltime = ref();

  const openAdd = () => {
    addForm.value = generateDataModel();
    addShow.value = true;
  };
  const addFormtime = ref({
    work_time: [],
    rest_time: [],
    work_day: [],
  });
  const openAddtime = () => {
    // addForm.value = generateDataModel();
    addShowtime.value = true;
    getTimeConf().then((res) => {
      if (res.code == 200) {
        addFormtime.value = Object.assign(
          {},
          ...res.data.map(({ confKey, confValue }) => ({
            [confKey as keyof ConfigObject]: confValue,
          }))
        );
        addFormtime.value.rest_time = addFormtime.value.rest_time.split('-');
        addFormtime.value.work_time = addFormtime.value.work_time.split('-');
        addFormtime.value.work_day = addFormtime.value.work_day.split(',');
        // console.log('获取当前工作时间', addFormtime.value);
      }
    });
  };

  const work_days = ref([
    { label: '周一', value: '1' },
    { label: '周二', value: '2' },
    { label: '周三', value: '3' },
    { label: '周四', value: '4' },
    { label: '周五', value: '5' },
    { label: '周六', value: '6' },
    { label: '周天', value: '7' },
  ]);
  const addShowtime = ref(false);
  const majorChange = (majorIdsArr) => {
    if (majorIdsArr && majorIdsArr.length) {
      addForm.value.majorIds = majorIdsArr.join(',');
    } else {
      addForm.value.majorIds = '';
    }
  };

  const handleCheck = (done) => {
    if (loading.value) {
      done(false);
      return;
    }
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1500);
    addModel.value.validate(
      async (errors: undefined | Record<string, ValidatedError>) => {
        if (!errors) {
          if (addForm.value.therapistId) {
            therapistrUpdate(addForm.value).then((res) => {
              if (res.code == '200') {
                Message.success({
                  content: res.message,
                });
                done(true);
                reset();
              } else {
                done(false);
              }
            });
          } else {
            therapistSave(addForm.value).then((res) => {
              if (res.code == '200') {
                Message.success({
                  content: res.message,
                });
                done(true);
                reset();
              } else {
                done(false);
              }
            });
          }
        } else {
          done(false);
        }
      }
    );
  };
  const handleChecktime = (done) => {
    if (loading.value) {
      done(false);
      return;
    }
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1500);
    addModeltime.value.validate(
      async (errors: undefined | Record<string, ValidatedError>) => {
        if (!errors) {
          // 处理一下数据
          const keyValuePairsArray: { confKey: string; confValue: string }[] =
            [];

          Object.keys(addFormtime.value).forEach((key) => {
            const value = addFormtime.value[key];
            let confValue = '';
            if (Array.isArray(value)) {
              confValue = value.join('-');
              if (key == 'work_day') {
                confValue = value.join(',');
              }
              keyValuePairsArray.push({ confKey: key, confValue });
            }
          });
          setTimeConf({
            conf: keyValuePairsArray,
          }).then((res) => {
            if (res.code == '200') {
              Message.success({
                content: res.message,
              });
              done(true);
              reset();
            } else {
              done(false);
            }
          });
        } else {
          done(false);
        }
      }
    );
  };

  const openEdit = (item) => {
    console.log('当前数据展示', item);
    // let majorIdsArr = [];
    addForm.value = item;
    addForm.value.organizationId = item.attributeId;

    // if (item.organization) {
    //   majorIdsArr = item.organization.map((item) => {
    //     return item.groupNameId.toString();
    //   });
    // }
    // addForm.value = Object.assign({}, item, {
    //   organizationId: majorIdsArr,
    // });

    addShow.value = true;
    console.log('当前数据展示', addForm.value);
  };

  const handleCancel = () => {
    addShow.value = false;
  };
  const handleCanceltime = () => {
    addShowtime.value = false;
  };
  const openDelete = (item) => {
    Modal.confirm({
      title: '提示',
      content: '确认删除吗？',
      onOk() {
        therapistRemove({
          therapistId: item.therapistId,
        }).then((res) => {
          if (res.code == '200') {
            Message.success({
              content: res.message,
            });
            fetchData();
          }
        });
      },
    });
  };
  const openRePass = (item) => {
    Modal.confirm({
      title: '提示',
      content: '确认重置此用户密码吗？',
      onOk() {
        resetPassword({
          therapistId: item.therapistId,
        }).then((res) => {
          if (res.code == '200') {
            Message.success({
              content: res.message,
            });
          }
        });
      },
    });
  };

  const lockRules = {
    effectiveTime: [
      {
        required: true,
        message: '请选择有效期',
      },
    ],
  };
  const generateLockModel = () => {
    return {
      userIds: '',
      effectiveTime: '',
    };
  };
  const lockForm = ref(generateLockModel());

  const lockShow = ref(false);
  const lockModel = ref();
  const userIds = ref([]);

  const openUnlock = (item) => {
    lockForm.value = {
      ...generateLockModel(),
      userIds: item.therapistId,
    };
    lockShow.value = true;
  };

  const openUnlockAll = () => {
    lockForm.value = {
      ...generateLockModel(),
      userIds: userIds.value.join(','),
    };
    lockShow.value = true;
  };

  const lockCheck = (done) => {
    if (loading.value) {
      done(false);
      return;
    }
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1500);
    lockModel.value.validate(
      async (errors: undefined | Record<string, ValidatedError>) => {
        if (!errors) {
          unlockUserBatch(lockForm.value).then((res) => {
            if (res.code == '200') {
              done(true);
              reset();
              Message.success({
                content: res.message,
              });
            } else {
              done(false);
            }
          });
        } else {
          done(false);
        }
      }
    );
  };
  const lockCancel = () => {
    lockShow.value = false;
  };

  const generateUploadModel = () => {
    return {
      file: null,

      roleId: '',
      effectiveTime: '',
      majorIds: '',
      majorIdsArr: [],
    };
  };

  const uploadRules = {
    deptId: [
      {
        required: true,
        message: '请选择部门',
      },
    ],
    roleId: [
      {
        required: true,
        message: '请选择角色',
      },
    ],
    effectiveTime: [
      {
        required: true,
        message: '请选择有效期',
      },
    ],
    majorIds: [
      {
        required: true,
        message: '请选择专业',
      },
    ],
    file: [
      {
        required: true,
        message: '请选择附件',
      },
    ],
  };
  const uploadForm = ref(generateUploadModel());
  const uploadShow = ref(false);
  const uploadModel = ref();
  const openUpload = () => {
    uploadForm.value = generateDataModel();
    uploadShow.value = true;
  };

  const majorUpChange = (majorIdsArr) => {
    if (majorIdsArr && majorIdsArr.length) {
      uploadForm.value.majorIds = majorIdsArr.join(',');
    } else {
      uploadForm.value.majorIds = '';
    }
  };
  const onChange = (fileList) => {
    if (fileList && fileList.length > 0) {
      uploadForm.value.file = fileList[0].file;
    } else {
      uploadForm.value.file = null;
    }
  };

  const uploadCheck = (done) => {
    if (loading.value) {
      done(false);
      return;
    }
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1500);
    uploadModel.value.validate(
      async (errors: undefined | Record<string, ValidatedError>) => {
        if (!errors) {
          let formData = new FormData();
          // formData.append('deptId', uploadForm.value.deptId);
          // formData.append('roleId', uploadForm.value.roleId);
          // formData.append('effectiveTime', uploadForm.value.effectiveTime);
          // formData.append('majorIds', uploadForm.value.majorIds);
          formData.append('file', uploadForm.value.file);
          importAdminUser(formData).then((res) => {
            if (res.code == '200') {
              Message.success({
                content: res.message,
              });
              reset();
              done(true);
            } else {
              done(false);
            }
          });
        } else {
          done(false);
        }
      }
    );
  };
  const uploadCancel = () => {
    uploadShow.value = false;
  };

  const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });
  const columns = computed<TableColumnData[]>(() => [
    {
      title: '用户名',
      dataIndex: 'username',
    },
    {
      title: '姓名',
      dataIndex: 'nickname',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      slotName: 'sex',
      align: 'center',
    },
    {
      title: '分组',
      dataIndex: 'groupName',
    },
    {
      title: '属性',
      dataIndex: 'attribute',
    },
    {
      title: '区间患者数量',
      dataIndex: 'intervalNumber',
    },
    {
      title: '每日患者数量',
      dataIndex: 'dayNumber',
    },

    // {
    //   title: '组织',
    //   dataIndex: 'organizationName',
    //   slotName: 'organizationName',
    // },

    // {
    //   title: '锁定状态',
    //   dataIndex: 'isLocking',
    //   slotName: 'isLocking',
    //   align: 'center',
    // },
    // {
    //   title: '有效期',
    //   dataIndex: 'effectiveTime',
    //   align: 'center',
    // },
    {
      title: '操作',
      dataIndex: 'option',
      slotName: 'option',
      align: 'center',
    },
  ]);

  const isLockings = useSelectionStore().isLockings;
  const sexs = useSelectionStore().sexs;
  const positions = ref([
    {
      label: '普通员工',
      value: 'SUBORDINATE',
    },
    {
      label: '组长',
      value: 'LEADER',
    },
  ]);
  const generateFormModel = () => {
    return {
      nickname: '',

      groupName: '',
      attribute: '',
      // sex: '',
      // isLocking: '',
    };
  };

  const formModel = ref(generateFormModel());
  const renderData = ref([]);
  const userList = ref();

  const basePagination: Pagination = {
    current: 1,
    pageSize: 10,
    total: 0,
  };
  const pagination = reactive({
    ...basePagination,
    'hide-on-single-page': true,
    'show-total': true,
    'show-jumper': true,
    'show-page-size': true,
  });

  const fetchData = async () => {
    setLoading(true);
    try {
      const data = {
        pageNum: pagination.current,
        ...pagination,
        ...formModel.value,
      };
      therapistList(data).then((res) => {
        let list = res.data.list || [];
        list.map((item) => {
          item.disabled = item.isLocking == 1 ? false : true;
        });
        renderData.value = list;
        pagination.total = res.data.total;
        pagination.current = res.data.pageNum;

        userList.value.selectAll(false);
      });
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  };

  const onPageChange = (current: number) => {
    pagination.current = current;
    fetchData();
  };
  const onPageSizeChange = (pageSize: number) => {
    pagination.pageSize = pageSize;
    fetchData();
  };

  const reset = () => {
    formModel.value = generateFormModel();
    fetchData();
  };
  fetchData();

  const downloadUser = () => {
    adminUserExport(formModel.value).then((res) => {});
  };

  const depts = ref([]);
  const props = {
    value: 'id',
    label: 'name',
  };
  // const getDepts = () => {
  // 	deptTree().then(res => {
  // 		depts.value = res.data || []
  // 	})
  // }
  // getDepts()

  const roles = ref([]);
  const rolesFields = {
    value: 'roleId',
    label: 'roleName',
  };
  const getRoles = () => {
    roleList().then((res) => {
      roles.value = res.data || [];
    });
  };
  getRoles();

  const organizations = ref([]);
  const organizationsFields = {
    value: 'id',
    label: 'name',
    // key: 'id',
    // title: 'name',
    // children: 'children',
  };
  const getOrganizations = () => {
    organizationTree().then((res) => {
      organizations.value = res.data || [];
    });
  };
  getOrganizations();

  const majors = ref([]);
  const majorsFields = {
    value: 'id',
    label: 'name',
  };
  //   const getMajors = () => {
  //     majorTree().then((res) => {
  //       majors.value = res.data || [];
  //     });
  //   };
  //   getMajors();
</script>
7 ny
